<template>
  <div class="light-control-container">
    <div 
      v-for="n in 4" 
      :key="n"
      class="light-control" 
      style="flex: 0 0 calc(33.333% - 10px); margin: 5px;"
    >
      <h3 style="font-size: 12px; margin-bottom: 4px;">
        {{ n === 1 ? '外遮阳' : n === 2 ? '内遮阳' : n === 3 ? '顶开窗' : '外翻墙' }}
      </h3>
      <div style="display: flex; justify-content: center; gap: 5px; margin-bottom: 3px;">
        <button 
          class="round-btn" 
          @click="controlShade(n-1, 1)" 
          style="width: 35px; height: 35px; border-radius: 50%; font-size: 11px;"
        >
          展开
        </button>
        <button 
          class="round-btn" 
          @click="controlShade(n-1, 2)" 
          style="width: 35px; height: 35px; border-radius: 50%; font-size: 11px;"
        >
          收拢
        </button>
      </div>
      <div class="light-status" style="font-size: 10px;">状态: {{ shadeStatus[n-1] }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'

const shadeStatus = ref(['停止', '停止', '停止', '停止'])

// 遮阳开窗控制函数
const controlShade = async (deviceIndex: number, action: number) => {
  // 这里应该实现实际的控制逻辑
  // 由于这是一个演示组件，我们只更新状态显示
  const statusText = ["停止", "展开", "收拢"][action]
  shadeStatus.value[deviceIndex] = statusText
  

}
</script>

<style scoped>
.light-control-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}
.light-control {
  text-align: center;
  margin: 10px;
  flex: 0 0 calc(33.333% - 20px);
}
.light-control h3 {
  color: #0ff;
  margin-bottom: 8px;
  font-size: 12px;
}

.light-control .round-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(145deg, #666666, #444444);
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

</style>
